<template>
    <div class="back-gh">
        <div class="header-top"></div>
        <div class="header-bottom">
            <div class="search-wrapper">

                <div class="search-bg">
                  <span class="icon-search icon"></span>
                  <input type="text" class="search" :placeholder="$t('home.hint')" v-model="searchText" @click="showHotSearch()" @keyup.13.exact="search()">
                  <div class="icon-shake-wrapper">
                    <span class="icon-shake " v-if="!hotSearchVisible" @click='showFlapCard()'>Shake</span>
                    <span class="text-cancle " v-else @click="back()">取消 </span>
                  </div>
                </div>
            </div>
        </div>
        <hot-search-list v-show="hotSearchVisible" ref='hotSearch'></hot-search-list>
    </div>
</template>
<script>
  import HotSearchList from './home/HotSearchList'
  import {storeHomeMixin} from '../utils/mixin'

  export default {
    components:{HotSearchList},
    mixins: [storeHomeMixin],
    data() {
      return {
        searchText:'',
        hotSearchVisible:false
      }
    },
    methods:{
        search(){
            this.$router.push({
                path:'/Personalcenter/list',
                query: {
                    keyword:this.searchText
                }

            })
        },
      showFlapCard(){
        this.$emit('showFlapCard')
      },
      back(){
        this.hideHotSearch()
      },
      showHotSearch() {
        this.hotSearchVisible = true
        this.$nextTick(() =>{
          this.$refs.hotSearch.reset()
        })
      },
      hideHotSearch() {
        this.hotSearchVisible = false
      }
    }
  }
</script>



<style lang="scss" scoped>
  @import "../assets/styles/global.scss";
    .search-wrapper {

        top: px2rem(42);
        left: 0;
        z-index: 100;
        display: flex;
        padding: px2rem(10);
        width: 100%;
        box-sizing: border-box;

        &.show-search {
          top: 0;
        }
        .search-back-wrapper {
          flex: 0;
          width: 0;
          @include center;

          visibility: hidden;
          &.show-search {
            margin-right: px2rem(10);
            flex: 0 0 px2rem(20);
            width: px2rem(20);
          }
          .icon-back {
            font-size: 0;
            &.show-search {
              font-size: px2rem(30);
            }
          }
        }
        .search-bg {
          flex: 1;
          background: #f4f4f4;
          border-radius: px2rem(20);
          border: px2rem(1) solid #eee;
          box-sizing: border-box;
          padding: px2rem(5) px2rem(70);
          transition: all $homeAnimationTime linear;
          @include left;
            .icon-shake-wrapper {
              font-size:  px2rem(60) !important;
              right: 0;
              top: 0;
              z-index: 110;
              padding-right: px2rem(15);
              height: 100%;
              cursor: pointer;
              @include center;
              .text-cancle{
                color:#666;
                font-size:px2rem(40);
                align-items: center;
                word-break:keep-all
              }
              .icon-shake{
                color:#666;
                font-size:px2rem(40);

              }
          }
          .icon-search {
            font-size: px2rem(40);
            color: #999;
          }
          .search {
            color: #666;
            width: 100%;
            height: px2rem(80);
            background: transparent;
            font-size: px2rem(12);
            margin-left: px2rem(10);
            border: none;
            &:focus {
              outline: none;
            }
            &::-webkit-input-placeholder {
              color: #ccc;
            }

          }
        }
      }
    ul li{
        cursor: pointer;
    }
    *{
        box-sizing: border-box;
    }
    .back-gh{

        margin: 5 auto;
        margin-bottom: 30px;
    }
    .header-bottom{
        margin: 0 auto;
        height: 60px;
        width: 980px;
        border-bottom: 2px solid #556565
    }
    .header-bottom ul li:hover{
       color:  #971d2d;
    }
    .back-gm{
        margin-top: 20px;
        width: 980px;

        margin: 0 auto;
    }
    .back-warp::after{
        clear: both;
        content: '.';
        display: block;
        height: 0;
        visibility: hidden;



    }
    .header-bottom ul{
        height: 100%
    }
    .header-bottom li{
        font-size: 16px;
        line-height:45px;
        padding: 0 20px 0px 20px;
        float: left;
    }
    .header-bottom .far{
        float: right;
    }
    .enav{
        padding: 5xp 10px 5px 10px;
        width: 100%;
        flex: 1;
    }
    .enav ul{
        flex: 1;
    }
    .enav ul{
        height: 100%;
        display: flex;
        flex-direction:column;
    }
    .enav svg{
        margin-right: 4px;
        top: 11px;
        left: 8px;
        height: 14px;
        width: 14px;
        overflow: hidden;
        size: 16px;
    }
    .enav ul li{
        padding-left: 50px;
        line-height: 40px;
        font-size: 12px;
        color: #666;
        /* border-top: #fff solid 1px;
        border-bottom: #fff solid 1px; */
        border-bottom: #ddd dotted 1px;
    }
    .enav ul>:first-child{
        padding-left: 18px;
        font-size: 14px;
        color: #333;
    }
    .warp-left{
        float: left;
        height: 100%;
        border: #ddd solid 1px;
        width: 178px;
        flex-direction:column;

    }
    .warp-right{
        width: 758px;
        padding: 35px 30px 30px 30px;
        float: right;
        border: #ddd solid 1px;
    }
    .back-gmw{
        height: 100%;
    }
</style>
